<template>
  <view class="login">
    <view class="head">
      <image class="logo" src="../../static/logo.png" alt="" srcset="" />
      <text class="tip">欢迎登录花满堂商户中心</text>
    </view>
    <view class="form-box">
      <view class="row-input">
        <input
          v-model="formData.username"
          maxlength="11"
          placeholder="用户名或手机号"
        />
      </view>
      <view class="row-input">
        <input
          v-model="formData.password"
          :password="showPassword"
          maxlength="18"
          placeholder="密码"
        />
        <view @click="changePassword">
          <u-icon
            :name="passwordIcon"
            size="28"
          ></u-icon>
        </view>
      </view>

      <view @click="actionLogin(formData)" class="login-btn"> 登录 </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useStore } from "@/hooks/useStore";
import { onShow } from "@dcloudio/uni-app";
import { reactive, ref, computed } from "vue";
const { actionLogin } = useStore();
const formData = reactive({
  username: "",
  password: "",
});
onShow(() => {
  uni.hideHomeButton();
});
const showPassword = ref(true);
const passwordIcon = computed(() => {
  return showPassword.value ? "eye-fill" : "eye-off";
});
function changePassword() {
  showPassword.value = !showPassword.value;
}
</script>

<style lang="scss">
page {
  background-color: #007aff;
}

.login {
  .head {
    padding-left: 80rpx;
    height: 35vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      width: 200rpx;
      height: 145rpx;
      font-size: 40rpx;
      color: #007aff;
      font-weight: bold;
      padding: 15px;
      background-color: #ffffff;
    }

    .tip {
      padding-top: 50rpx;
      color: #ffffff;
      font-size: 40rpx;
      letter-spacing: 5rpx;
      font-weight: bold;
    }
  }

  .form-box {
    padding: 0rpx 80rpx;
    height: 65vh;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background-color: #ffffff;

    .tab-box {
      padding-top: 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      color: #929293;
      font-weight: bold;

      .row-tab {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-weight: bold;
        font-size: 35rpx;
        width: 50%;
        height: 100%;

        .tab-active {
          color: #4d88f8;
        }

        .thing {
          margin-top: 20rpx;
          width: 50rpx;
          height: 6rpx;
          background-color: #3884f6;
        }
      }
    }

    .row-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 50rpx;
      font-size: 30rp;
      height: 100rpx;
      border-bottom: 1rpx solid #cfcfd0;

      input {
        flex: 1;
      }

      .code {
        display: flex;
        justify-content: flex-end;
        font-weight: bold;
        color: #0b77f7;
        width: 200rpx;
        font-size: 26rpx;
      }
    }

    .login-btn {
      margin-top: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      letter-spacing: 10rpx;
      background: linear-gradient(to right, #0a7df7, #0f62f3);
      color: #ffffff;
      border-radius: 10rpx;
      font-size: 30rpx;
    }

    .menu-link {
      position: fixed;
      left: 80rpx;
      right: 80rpx;
      bottom: 50rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}
</style>
